@mixin app-module-ui-index-color() {
    #{$app-cls}-#{$pageName}-color {
        @include app-module-ui-create-example-grid();
        &__item {
            @include app-module-ui-create-example-grid-item();
            height: 40px;
            position: relative;
            margin-bottom: 30px;
            > span {
                position: absolute;
                left: 0;
                top: 100%;
            }
        }

        &__primary {
            @debug &;
            background-color: $aui-brand-primary;
        }
        &__info {
            background-color: $aui-brand-info;
        }
        &__success {
            background-color: $aui-brand-success;
        }
        &__warning {
            background-color: $aui-brand-warning;
        }
        &__danger {
            background-color: $aui-brand-danger;
        }
        &__dark {
            background-color: $aui-brand-dark;
        }
        &__light-dark {
            background-color: $aui-brand-ligh-dark;
        }
        &__sliver {
            background-color: $aui-brand-sliver;
        }
        &__light-sliver {
            background-color: $aui-brand-light-sliver;
        }
        &__gray {
            background-color: $aui-brand-gray;
        }
        &__light-gray {
            background-color: $aui-brand-light-gray;
        }
        &__black {
            background-color: $aui-brand-black;
        }
        &__orange {
            background-color: $aui-brand-orange;
        }
        &__muted {
            background-color: $aui-brand-muted;
        }
    }
}

@mixin app-define-module() {
    @include app-module-ui-index-color();
}